<template>
    <div class="login-title">登录</div>
    <a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off"
        @finish="onFinish" @finishFailed="onFinishFailed">

        <a-form-item name="loginAccount" :rules="[{ required: true, message: '请输入用户名' }]">
            <a-input v-model:value="formState.loginAccount" placeholder="用户名">
                <template #prefix>
                    <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
                </template>
            </a-input>
        </a-form-item>

        <a-form-item name="loginPassword" :rules="[{ required: true, message: '请输入密码' }]">
            <a-input v-model:value="formState.loginPassword" type="password" placeholder="密码">
                <template #prefix>
                    <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
                </template>
            </a-input>
        </a-form-item>

        <a-form-item>
            <a-button type="primary" html-type="submit" class="login-form-button">登录</a-button>
        </a-form-item>
    </a-form>

</template>
<script setup>
import { reactive } from 'vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router'
import { login } from '@/api/user'
import { useTokenInfoStore } from '@/store/tokenInfo'

// const isLoading = ref(true);

const router = useRouter()

const formState = reactive({
    loginAccount: '',
    loginPassword: ''
});

const onFinish = async values => {
    // isLoading.value = true;
    let result = await login(values)
    // isLoading.value = false;
    if (result) {
        let tokenInfo = useTokenInfoStore()
        tokenInfo.setToken(result);
        router.push("/home");
    }

};
const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
};







</script>

<style scoped>
* {
    text-align: left;
}

.login-form-button {
    width: 100%;
    text-align: center;
}

.login-title {
    text-align: left;
    font-size: 20px;
    margin: 10px 0;
    color: black;
}
</style>